<template>
  <el-drawer
    title="编辑"
    :visible.sync="visible"
    :before-close="handleClose"
    :destroy-on-close="true"
    :wrapperClosable="false"
    :size="this.drawerSize"
  >
    <div class="drawer-content">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="标题" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="描述" prop="content">
          <el-input v-model="form.content" type="textarea" :rows="4"></el-input>
        </el-form-item>
        <el-form-item label="图片详情">
          <el-upload
            :action="uploadApi"
            list-type="picture-card"
            :data="filePicData"
            :file-list="showFilePicList"
            accept="image/*"
            :multiple="false"
            :headers="headers"
            :on-success="handleUpload"
            :on-remove="handleRemove"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleAdd">确定</el-button>
          <el-button @click="handleClose">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-drawer>
</template>

<script>
import { DRAWER_SIZE, PLEASE_INPUT } from "@/util/constant";
import { deleteArticleApi, uploadAttachmentApi } from "@/api/modules/common.api";
import { getImgCollDetailApi, updateImgCollListApi } from "@/api/modules/imgColl.api";

export default {
  data() {
    return {
      visible: false,
      form: {
        name: "",
        attrIdList: [],
        content: [],
        status: 2,
        id: ''
      },
      limit: 1,
      uploadApi: uploadAttachmentApi,
      headers: {
        Authorization: `Bearer ${localStorage.getItem("token")}`,
      },
      filePicData: {
        objType: 1,
      },
      drawerSize: DRAWER_SIZE,
      orgList: [],
      roleList: [],

      showFilePicList: [],
      rules: {
        imgName: [{ required: true, message: PLEASE_INPUT, trigger: "blur" }],
      },
      page: {
        pageNum: 1,
        pageSize: 10,
      },
    };
  },
  methods: {
    async init(id) {
      this.showFilePicList = []

      const res = await getImgCollDetailApi(id);
      this.form.name = res.name
      this.form.content = res.content
      this.form.id = res.id
      res.attachmentList.forEach((item) => {
        this.showFilePicList.push({
          name: item.fileName,
          url: item.filePath,
          id: item.attachmentId,
          attrType: item.attrType,
        });
        this.form.attrIdList.push(item.attachmentId)


      });
      this.visible = true;
    },
    handleClose() {
      this.visible = false;
    },
    handleUpload(response, f, fileList) {
      this.form.attrIdList = [];
      fileList.forEach((item) => {
        if (item.response?.errno === 0) {
          this.form.attrIdList.push(item.response.data.attrId);
        }else{
          this.form.attrIdList.push(item.id);
        }
      });
    },
    async handleRemove(file, fileList) {
      await deleteArticleApi({id: file.id})
      this.$message({
        message: "成功",
        type: "success",
      });
      fileList.forEach((item) => {
        if (item.response?.errno === 0) {
          this.form.attrIdList.push(item.response.data.attrId);
        }else{
          this.form.attrIdList.push(item.id);
        }
      });
    },

    handleAdd() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          await updateImgCollListApi(this.form);
          this.$message({
            message: "成功",
            type: "success",
          });
          this.visible = false;
          this.$emit("getParentTableData",this.page);
        }
      });
    },
  },
};
</script>
